<div class="clr-row" [formGroup]="listBoxForm">
  <div class="clr-col-md-5 clr-col-lg-5 clr-col-sm-12">
    <h4 class="text-center vertical-spacing-5">{{availableText}}</h4>
    <input type="text" class="clr-input vertical-spacing-5" placeholder="{{availableFilterPlaceholder}}"
           formControlName="availableSearchInput"
           style="border: 1px solid #ccc;border-radius: 4px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;width: 100%;margin-bottom: 0;"/>
    <select class="clr-select list-box" formControlName="availableListBox" multiple>
      <option
        *ngFor="let item of availableItems | arrayFilter:['text', searchTermAvailable] | arraySort:['text', 'ASC'];trackBy:trackByValue"
        [value]="item?.value"
        (dblclick)="moveAvailableItemToSelected(item)">{{item?.text}}</option>
    </select>
  </div>
  <div class="clr-col-md-2 clr-col-lg-2 clr-col-sm-12 center-block text-center">
    <button type="button" class="btn btn-default clr-col-md-8 clr-col-md-offset-2 atr top80 sm-spacing" style="margin-top:50px;"
            *ngIf="moveAllButton" (click)="moveAllItemsToSelected()">
      <span style="margin-top:0px;">新增全部</span>
    </button>
    <button type="button" class="btn btn-default clr-col-md-8 clr-col-md-offset-2 str vertical-spacing-5 sm-spacing"
            [disabled]="!availableListBoxControl.value?.length"
            (click)="moveMarkedAvailableItemsToSelected()">
      <span style="margin-top:0px;">新增</span>
    </button>
    <button type="button" class="btn btn-default clr-col-md-8 clr-col-md-offset-2 stl vertical-spacing-5 sm-spacing"
            [disabled]="!selectedListBoxControl.value?.length"
            (click)="moveMarkedSelectedItemsToAvailable()">
      <span style="margin-top:0px;">删除</span>
    </button>
    <button type="button" class="btn btn-default clr-col-md-8 clr-col-md-offset-2 atl bottom10 sm-spacing"
            *ngIf="moveAllButton" (click)="moveAllItemsToAvailable()">
      <span style="margin-top:0px;">删除全部</span>
    </button>
  </div>
  <div class="clr-col-md-5 clr-col-lg-5 clr-col-sm-12">
    <h4 class="text-center vertical-spacing-5">{{selectedText}}</h4>
    <input type="text" class="form-control vertical-spacing-5" placeholder="{{selectedFilterPlaceholder}}"
           formControlName="selectedSearchInput"
           style="border: 1px solid #ccc;border-radius: 4px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;width: 100%;margin-bottom: 0;"/>
    <select class="form-control list-box" formControlName="selectedListBox" multiple>
      <option
        *ngFor="let item of selectedItems | arrayFilter:['text', searchTermSelected] | arraySort:['text', 'ASC'];trackBy:trackByValue"
        [value]="item?.value"
        (dblclick)="moveSelectedItemToAvailable(item)">{{item?.text}}</option>
    </select>
  </div>
</div>
